<template>
	<view class="page">
		
		<view class="flex p-xs mb-sm text-lg nav-capsule">
			<view class="flex-four padding-lr-sm margin-lr-xs margin-bottom-xs radius">
				<view class="cu-bar action padding-xs bg-white setting-action round text-sm">
					<view class="iconfont icon-daojishi margin-lr-xs" style="width: 80rpx;">{{timer.tag}}</view>
					<text class="padding-lr-xs text-gray text-light">|</text> 
					<view class="iconfont icon-chakanjiexi margin-lr-xs" @tap="PromptModel = true">解析</view>
					<text class="padding-lr-xs text-gray text-light">|</text>
					<view class="cuIcon-list margin-lr-xs" style="width: 130rpx;" @tap="QuestionModel = true">选题<view class='cu-tag bg-yellow xs round margin-lr-xs'>{{QIndex + 1}}</view></view>
					<text class="padding-lr-xs text-gray text-light">|</text>
					<view class="iconfont icon-tuichu margin-lr-xs" @tap="readyQuestion">交卷</view>
				</view>
			</view>
			<view class="flex-sub padding-lr-sm margin-xs radius text-center text-black"></view>
		</view>
		
		<!-- 答题区域 -->
		<view class="bg-white bg-questions2">
			<!-- 问题 -->
			<view class="padding-sm questions">
				<rich-text :nodes="QList[QIndex].questions"></rich-text>
			</view>
		</view>
		
		<view class="padding-bottom-xl"></view>
		
		<!-- 换题 -->
		<view class="cu-bar tabbar bg-white shadow foot">
			<!-- 答案 -->
			<view class="flex margin">
				<view class="flex-four">
					<button v-for="(item, index) in QList[QIndex].answerList" :key="index"
						@tap="onAnswer" :data-option="item.option" :data-qindex="index"
						:class="(QList[QIndex].userAnswer == item.option) ? 'bg-olive' : '' " class="cu-btn radius margin-right-xl" >
						{{item.option}}
					</button>
				</view>
				<view class="flex-sub">
					<button class="cu-btn round bg-yellow" @tap="nextQuestion" v-if="(QIndex + 1) < QList.length">下一题</button>
					<button class="cu-btn round bg-yellow" @tap="readyQuestion" v-else>提交试卷</button>
				</view>
			</view>
		</view>
		
		<!-- 选题区域 -->
		<view class="cu-modal drawer-modal justify-start show" @tap="QuestionModel = false" v-if="QuestionModel">
			<view class="cu-dialog basis-lg bg-white">
				<view class="content text-left bg-yellow padding-sm text-white">试卷选题</view>
				<view class="cu-list menu text-left">
					<view class='cu-tag padding margin-sm radius' 
						 :class="(index == QIndex) ? 'bg-yellow' : 'bg-gray' " 
						 v-for="(item, index) in QList" :key="index"
						 @tap="selectedQuestion" :data-Qindex="index">
						{{index + 1}}
						<view class="cu-tag badge" v-if="item.userAnswer">{{item.userAnswer}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 解析区域 -->
		<view class="cu-modal bottom-modal show" @tap="PromptModel = false" v-if="PromptModel">
			<view class="cu-dialog" @tap.stop="">
				<view class="content text-left bg-yellow padding-sm text-white">试题解析</view>
				<view class="text-left padding">
					答案: A
				</view>
				<view class="text-left padding" style="min-height: 40vh;">
					
				</view>
			</view>
		</view>

		<!-- 提交提示 -->	
		<view class="cu-modal show" @tap="SubmitModel = false" v-if="SubmitModel">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">交卷提示</view>
					<view class="action" @tap="SubmitModel = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left">
					检测到试题尚未全部完成，确认后将不能继续答题，确定是否交卷?
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action padding-sm">
						<button class="cu-btn line-green text-green" @tap="SubmitModel = false">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="submitQuestion">确定</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UserInfo: {
					wxUnionid: true,
					userName: "请先登陆",
					shareCode: "R000000",
					usableMoney: "0.00",
					usableRbi: "0.00",
				},
				// 定时器
				timer: {
					obj: null,
					time: 60 * 30,
					tag: "30:00"
				},
				
				// 题目下标
				QIndex: 0,
				QList: [
					{
						questions: '<div class="questem-inner bdjson"><p>如图1，∠ACB=45°，BC=3，过动点A作AD⊥BC，垂足D在线段BC上且异于点B，连接AB，沿AD将△ABD折起，使∠BDC=90°（如图2所示），</p><p><img width="302px" height="141px" class="scale-img" src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b812c8fcc3cec3fd8694dfd6d288d43f869427ee.jpg"></p><p>（1）当BD的长为多少时，三棱锥A﹣BCD的体积最大；</p><p>（2）当三棱锥A﹣BCD的体积最大时，设点E，M分别为棱BC，AC的中点，试在棱CD上确定一点N，使得EN⊥BM，并求EN与平面BMN所成角的大小。</p></div>',
						answerList: [
							{option: "A", "answer": "3"},
							{option: "B", "answer": "4"},
							{option: "C", "answer": "5"},
							{option: "D", "answer": "6"},
						]
					},
					{
						questions: '<div class="bd ">  <div class="exam-question bdjson">  <p class="ext_text-align_left"><span>3．设有下面四个命题</span></p><p><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/4034970a304e251f4c8205b7ad86c9177f3e530c.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/4034970a304e251f4c8205b7ad86c9177f3e530c.jpg" width="18px" height="24px" class="scale-img loaded" isloaded="true"><span>：若复数</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/d000baa1cd11728baf226d6dc2fcc3cec3fd2c76.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/d000baa1cd11728baf226d6dc2fcc3cec3fd2c76.jpg" width="13px" height="13px" class="scale-img loaded loaded" isloaded="true"><span>满足</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/314e251f95cad1c87cce1d68753e6709c93d510c.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/314e251f95cad1c87cce1d68753e6709c93d510c.jpg" width="43px" height="41px" class="scale-img loaded loaded" isloaded="true"><span>，则</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/cc11728b4710b91222ce17b1c9fdfc0392452276.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/cc11728b4710b91222ce17b1c9fdfc0392452276.jpg" width="40px" height="17px" class="scale-img loaded loaded" isloaded="true"><span>；</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/0dd7912397dda14423538dfdb8b7d0a20cf48623.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/0dd7912397dda14423538dfdb8b7d0a20cf48623.jpg" width="20px" height="24px" class="scale-img loaded loaded" isloaded="true"><span>：若复数</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/d52a2834349b033b2ce21d951fce36d3d539bd13.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/d52a2834349b033b2ce21d951fce36d3d539bd13.jpg" width="13px" height="13px" class="scale-img loaded loaded" isloaded="true"><span>满足</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/4610b912c8fcc3ce2fcf287c9845d688d43f2076.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/4610b912c8fcc3ce2fcf287c9845d688d43f2076.jpg" width="47px" height="20px" class="scale-img loaded loaded" isloaded="true"><span>，则</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/5882b2b7d0a20cf4a2ca1f907c094b36acaf9923.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/5882b2b7d0a20cf4a2ca1f907c094b36acaf9923.jpg" width="40px" height="17px" class="scale-img loaded loaded" isloaded="true"><span>；</span></p><p><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/2934349b033b5bb5b1bdc1b13cd3d539b600bc13.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/2934349b033b5bb5b1bdc1b13cd3d539b600bc13.jpg" width="19px" height="24px" class="scale-img loaded" isloaded="true"><span>：若复数</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/77094b36acaf2edd3aaba8a6871001e939019323.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/77094b36acaf2edd3aaba8a6871001e939019323.jpg" width="35px" height="24px" class="scale-img loaded loaded" isloaded="true"><span>满足</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/f9dcd100baa1cd1195c3936fb312c8fcc3ce2d0c.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/f9dcd100baa1cd1195c3936fb312c8fcc3ce2d0c.jpg" width="57px" height="24px" class="scale-img loaded" isloaded="true"><span>，则</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/adaf2edda3cc7cd91677d5963301213fb80e9123.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/adaf2edda3cc7cd91677d5963301213fb80e9123.jpg" width="47px" height="27px" class="scale-img loaded loaded" isloaded="true"><span>；</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/bba1cd11728b4710505a1c83c9cec3fdfc03230c.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/bba1cd11728b4710505a1c83c9cec3fdfc03230c.jpg" width="20px" height="24px" class="scale-img loaded" isloaded="true"><span>：若复数</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/d53f8794a4c27d1e2629da8b11d5ad6eddc43876.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/d53f8794a4c27d1e2629da8b11d5ad6eddc43876.jpg" width="40px" height="17px" class="scale-img loaded" isloaded="true"><span>，则</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b7003af33a87e950b57d12231a385343fbf2b413.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b7003af33a87e950b57d12231a385343fbf2b413.jpg" width="41px" height="17px" class="scale-img loaded loaded" isloaded="true"><span>.</span></p><p><span>其中的真命题为(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; )</span></p> </div>   <div class="exam-options bdjson hasactive"> <div class="opt-item"><p><span class="prefix">A</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/e850352ac65c1038d0142f8db8119313b07e8913.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/e850352ac65c1038d0142f8db8119313b07e8913.jpg" width="40px" height="24px" class="scale-img loaded" isloaded="true"></p></div><div class="opt-item"><p><span class="prefix">B</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b812c8fcc3cec3fd114b463adc88d43f8794270c.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b812c8fcc3cec3fd114b463adc88d43f8794270c.jpg" width="40px" height="24px" class="scale-img loaded loaded" isloaded="true"></p></div><div class="opt-item"><p><span class="prefix">C</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/c9fcc3cec3fdfc037c0d02f7de3f8794a4c2260c.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/c9fcc3cec3fdfc037c0d02f7de3f8794a4c2260c.jpg" width="41px" height="24px" class="scale-img loaded" isloaded="true"></p></div><div class="opt-item"><p><span class="prefix">D</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/ac6eddc451da81cbc2e962825866d01609243176.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/ac6eddc451da81cbc2e962825866d01609243176.jpg" width="43px" height="24px" class="scale-img loaded loaded" isloaded="true"></p></div> </div>   </div>',
						answerList: [
							{option: "A", "answer": "3"},
							{option: "B", "answer": "4"},
							{option: "C", "answer": "5"},
							{option: "D", "answer": "6"},
						]
					},
					{
						questions: '<div class="bd ">  <div class="exam-question bdjson">  <p><span>5.已知函数</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/9a504fc2d562853576ac0d7b9aef76c6a7ef6318.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/9a504fc2d562853576ac0d7b9aef76c6a7ef6318.jpg" width="109px" height="49px" class="scale-img loaded" isloaded="true"><span>，则</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/86d6277f9e2f07080c20f55ae324b899a901f247.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/86d6277f9e2f07080c20f55ae324b899a901f247.jpg" width="35px" height="21px" class="scale-img loaded loaded" isloaded="true"></p> </div>   <div class="exam-options bdjson hasactive"> <div class="opt-item"><p><span class="prefix">A</span><span>是奇函数，且在R上是增函数</span></p></div><div class="opt-item"><p><span class="prefix">B</span><span>是偶函数，且在R上是增函数</span></p></div><div class="opt-item"><p><span class="prefix">C</span><span>是奇函数，且在R上是减函数</span></p></div><div class="opt-item"><p><span class="prefix">D</span><span>是偶函数，且在R上是减函数</span></p></div> </div>   </div>',
						answerList: [
							{option: "A", "answer": "3"},
							{option: "B", "answer": "4"},
							{option: "C", "answer": "5"},
							{option: "D", "answer": "6"},
						]
					},
					{
						questions: '<div class="bd ">  <div class="exam-question bdjson">  <p><span>8．下面程序框图是为了求出满足3</span><span class="ext_italic ext_valign_sup">n</span><span>−2</span><span class="ext_italic ext_valign_sup">n</span><span>&gt;1000的最小偶数</span><span class="ext_italic">n</span><span>，那么在</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/9358d109b3de9c82180f18c06681800a19d84313.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/9358d109b3de9c82180f18c06681800a19d84313.jpg" width="33px" height="14px" class="scale-img loaded loaded" isloaded="true"><span>和</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b999a9014c086e065ca6de0408087bf40ad1cb77.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/b999a9014c086e065ca6de0408087bf40ad1cb77.jpg" width="29px" height="11px" class="scale-img loaded" isloaded="true"><span>两个空白框中，可以分别填入(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; )</span></p><p><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/9e3df8dcd100baa12b76a6f44d10b912c8fc2e23.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/9e3df8dcd100baa12b76a6f44d10b912c8fc2e23.jpg" width="157px" height="221px" class="scale-img loaded loaded" isloaded="true"></p> </div>   <div class="exam-options bdjson hasactive"> <div class="opt-item"><p><span class="prefix">A</span><span class="ext_italic">A</span><span>&gt;1 000和</span><span class="ext_italic">n</span><span>=</span><span class="ext_italic">n</span><span>+1</span></p></div><div class="opt-item"><p><span class="prefix">B</span><span class="ext_italic">A</span><span>&gt;1 000和</span><span class="ext_italic">n</span><span>=</span><span class="ext_italic">n</span><span>+2</span></p></div><div class="opt-item"><p><span class="prefix">C</span><span class="ext_italic">A</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/f9dcd100baa1cd1195ec936fb312c8fcc3ce2d23.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/f9dcd100baa1cd1195ec936fb312c8fcc3ce2d23.jpg" width="13px" height="16px" class="scale-img loaded loaded" isloaded="true"><span>1 000和</span><span class="ext_italic">n</span><span>=</span><span class="ext_italic">n</span><span>+1</span></p></div><div class="opt-item"><p><span class="prefix">D</span><span class="ext_italic">A</span><img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/2f738bd4b31c870194c253a92d7f9e2f0708ff0d.jpg" data-lazysrc="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/baidu/pic/item/2f738bd4b31c870194c253a92d7f9e2f0708ff0d.jpg" width="13px" height="16px" class="scale-img loaded loaded" isloaded="true"><span>1 000和</span><span class="ext_italic">n</span><span>=</span><span class="ext_italic">n</span><span>+2</span></p></div> </div>   </div>',
						answerList: [
							{option: "A", "answer": "3"},
							{option: "B", "answer": "4"},
							{option: "C", "answer": "5"},
							{option: "D", "answer": "6"},
						]
					},
				],
				
				// 
				responseOption: "",
				
				// 试卷选题
				QuestionModel: false,
				PromptModel: false,
				SubmitModel: false
			}
		},
		
		onLoad: function () {
			let _this = this;
			_this.loadQuestion();
		},
		
		methods: {
			// 结束下拉
			onPullDownRefresh() {
				
			},

			onNavigateBack() {
				let _this = this;
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 用户信息
			getUserInfo() {
				let _this = this;
				console.log("加载用户信息");
			},
			
			// 加载试题
			loadQuestion() {
				let _this = this;
				
				// 获取题库
				
				// 做倒计时
				_this.timer.obj = setInterval(function() {
					_this.timeDown();
				}, 1000);
			},
			
			// 选择试题
			selectedQuestion(event) {
				let _this = this;
				let _dataset = event.currentTarget.dataset;
				
				_this.QIndex = parseInt(_dataset.qindex);
			},
			
			//倒计时
			timeDown: function() {
				let _this = this;
				
				// 倒计时开始
                if (_this.timer.time >= 0) {
                    let minutes = Math.floor(_this.timer.time / 60);
                    let seconds = Math.floor(_this.timer.time % 60);
					
					//更新显示
					_this.timer.tag = (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds);
					
					// 时间递减
					_this.timer.time--;
                } 
				
				// 倒计时结束
				else {
                    clearInterval(_this.timer.obj);
                }
			},
		
			// 用户答题
			onAnswer(event) {
				let _this = this;
				let _dataset = event.currentTarget.dataset;
				
				_this.responseOption = _dataset.option;
				_this.QList[_this.QIndex]['userAnswer'] = _dataset.option;
				
				console.log("########", _this.QList);
			},
			
			// 切换试题
			nextQuestion() {
				let _this = this;
				let _qlen = _this.QList.length;
				
				console.log(_this.QIndex, "#", _qlen);
				if((_this.QIndex + 1) < _qlen) {
					_this.QIndex++;
				}
			},
			
			// 提交试卷
			readyQuestion() {
				let _this = this;
				console.log("#提交试卷", _this.QList);
				
				for (let i = 0; i < _this.QList.length; i++) {
					let Q = _this.QList[i];
					if(!Q.userAnswer) {
						_this.SubmitModel = true;
						return;
					}
				}
				
				// 直接提交
				_this.submitQuestion();
			},
			
			// 提交试卷
			submitQuestion() {
				let _this = this;
				
				console.log("#####提交成功");
				uni.navigateTo({
					url: '../score'
				})
			}
			
		}
	}
</script>

<style>
	body, page, .page {
		background-color: #fdd800;
		min-height: 100vh;
	}

	.iconfont {
		font-size: 25rpx;
	}

	.nav-capsule {
		padding: 55rpx 0 0 0;
	}
	
	.bg-banner {
		background-image:url('../../static/image/banner.png');
		background-repeat:repeat-x;
		background-position:top center;
	}
	
	.basis-rxl {
		border: 1rpx solid #000000;
	}
	
	.setting-action:first-child {
		margin: 0 20rpx 0 0;
	}

	.questions {
		min-height: 55vh;
		font-size: 14px;
	}
	
	rich-text>>>* {
		vertical-align: middle;
		line-height: 60rpx;
	}
	
	.questions>>>* {
		vertical-align: middle;
		line-height: 60rpx;
	}
</style>
